<template>
  <el-row :gutter="20">
    <el-col
      :xs="24"
      :sm="12"
      :md="6"
      :style="{ 'margin-top': '20px' }"
      v-for="(item, key) in serviceList"
      :key="key"
    >
      <el-card
        :body-style="{ padding: '0px' }"
        v-loading="!item"
        style="height: 200px"
        shadow="always"
        ><div
          :style="{
            backgroundColor: '#ffffff',
            height: '200px',
            display: 'block',
          }"
          v-if="item"
        >
          <div
            style="
              padding: 10px 0 10px 0;
              color: #409eff;
              font-size: 16px;
              font-weight: bold;
              background: #c6e2ff;
              border-radius: 5px;
            "
          >
            {{ item.title }}
          </div>
          <div style="height: 100px">
            <p
              style="
                color: #666666;
                font-size: 14px;
                margin-top: 10px;
                margin-left: 10px;
                margin-right: 10px;
              "
            >
              {{ item.description }}
            </p>
          </div>
          <div>
            <el-divider
              style="margin: 0px; padding: 0px; background-color: #e6e6e6"
            ></el-divider>
            <div style="margin: 5px; padding: 0px">
              <el-button
                class="btn-price"
                style="font-size: 16px"
                type="warning"
                size="small"
                :disabled="item.disable"
                @click="goTo(item.link, route.fullPath)"
                plain
                >{{ item.price }}</el-button
              >
              <el-button
                class="btn-price"
                style="font-size: 16px"
                type="primary"
                size="small"
                :disabled="item.disable"
                @click="goTo(item.sub_link, route.fullPath)"
                plain
                v-if="item.sub_title"
                >{{ item.sub_title }}</el-button
              >
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { reactive } from "vue";
import { useRoute } from "vue-router";
import { goTo } from "@/libs/utils";

export default {
  setup() {
    const route = useRoute();
    const serviceList = reactive([
    {
        title: "发票解析",
        sub_title: "我的发票",
        // price: "￥0.1/份",
        price: "点击使用",
        // price: "即将上线!",
        disable: false,
        link: "/invoice/full",
        sub_link: "/invoice/info/all",
        description:
          "提供发票解析服务，可获取全票面信息，支持PDF文件和JPG/PNG图片",
      },  
    {
        title: "发票查验",
        sub_title: "我的发票",
        // price: "开始使用",
        price: "即将上线!",
        disable: true,
        link: "/invoice/check",
        sub_link: "/invoice/info/all",
        description: "提供发票查验服务，可获取查验截图和全票面字段",
      }
    ]);
    return { serviceList, goTo, route };
  },
};
</script>

<style>
</style>
